<template>
  <div id="all-map" class="mapDetail" >
  </div>
</template>

<script>
import AMap from 'AMap'
// import AMapUI from 'AMapUI'
export default {
  props: {
    mapDetailList: {
      type: Array,
      required: []
    }
  },
  data () {
    return {
      map: null,
      arriveCoor: [106.35, 29.34],
      toolbar: null,
      polyline: null,
      path: [],
      marker: null,
      mapList: [],
      centerPath: [106.35, 29.34]
    }
  },
  mounted () {
    this.GaodeMap()
  },
  watch: {
    mapDetailList: {
      handler: function (newVal) {
        const arr = []
        newVal.forEach(el => {
          arr.push(el.value)
        })
        var ary1 = []
        const ary2 = []
        arr.forEach(el => {
          ary1 = []
          if (!el) {
          } else {
            for (const key in el) {
              ary1.push(el[key])
            }
            ary2.push(ary1)
          }
        })
        this.path = ary2
        this.centerPath = ary2[ary2.length - 1]
        this.GaodeMap()
      }
    }
  },
  methods: {
    GaodeMap () {
      this.map = new AMap.Map('all-map', {
        center: this.centerPath, // [纬度，经度]
        resizeEnable: true,
        zoom: 6
      })
      this.addTool()
      this.showLine()
      this.addMarker()
    //   this.show()
    },
    // 添加工具条
    addTool () {
      AMap.plugin(['AMap.ToolBar', 'AMap.Driving'], () => {
        const toolbar = new AMap.ToolBar()
        this.map.addControl(toolbar)
      })
    },
    addMarker (arriveCoor) {
      this.marker = new AMap.Marker({
        icon: '', // 图片ip
        imageSize: '20px',
        position: arriveCoor,
        offset: new AMap.Pixel(-13, -30),
        // 设置是否可以拖拽
        draggable: true,
        cursor: 'move',
        // 设置拖拽效果
        raiseOnDrag: true,
        lineJoin: 'round',
        geodesic: 'true'
      })
      this.marker.setMap(this.map)
    },
    // 展示路线
    showLine () {
      this.polyline = new AMap.Polyline({
        path: this.path,
        strokeStyle: 'dashed',
        borderWeight: 1, // 线条宽度，默认为 1
        strokeColor: 'blue', // 线条颜色
        lineJoin: 'round' // 折线拐点连接处样式
      })
      //   this.map.add(this.polyline)
      this.polyline.setMap(this.map)
    }
    // show () {
    //   var path = [// 每个弧线段有两种描述方式
    //     [116.39, 39.91, 116.37, 39.91], // 起点
    //     // 第一段弧线
    //     [116.380298, 39.907771, 116.38, 39.90], // 控制点，途经点
    //     // 第二段弧线
    //     [116.385298, 39.907771, 116.40, 39.90], // 控制点，途经点//弧线段有两种描述方式1
    //     // 第三段弧线
    //     [// 弧线段有两种描述方式2
    //       [116.392872, 39.887391], // 控制点
    //       [116.40772, 39.909252], // 控制点
    //       [116.41, 39.89]// 途经点
    //     ],
    //     // 第四段弧线
    //     [116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273]
    //     // 控制点，控制点，途经点，每段最多两个控制点
    //   ]

    //   this.bezierCurve = new AMap.BezierCurve({
    //     path: path,
    //     isOutline: true,
    //     outlineColor: '#ffeeff',
    //     borderWeight: 3,
    //     strokeColor: '#3366FF',
    //     strokeOpacity: 1,
    //     strokeWeight: 6,
    //     // 线样式还支持 'dashed'
    //     strokeStyle: 'dashed',
    //     // strokeStyle是dashed时有效
    //     strokeDasharray: [10, 10],
    //     lineJoin: 'round',
    //     lineCap: 'round',
    //     zIndex: 50
    //   })

    //   this.bezierCurve.setMap(this.map)
    // }
  }
}
</script>

<style>
.mapDetail {
  margin-top: 10%;
  width: 500px;
  height: 350px;
  background-color: rgb(156, 158, 91);
}

</style>
